<template>
  <div class="app-container" style="width: 800px;margin: 30px auto">
    <h3>肌电数据采集</h3>
    <el-form label-width="120px" :model="info" ref="infoForm" :rules="infoRules">
      <el-row class="step">前静息阶段</el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="平均值：" prop="y1" >
            <el-input v-model="info.y1" clearable class="all"   />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="变异值：" prop="y2">
            <el-input v-model="info.y2" clearable class="all"   />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="step">快速收缩阶段</el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="最大值：" prop="y3">
            <el-input v-model="info.y3" clearable class="all" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="放松时间：" prop="y4">
            <el-input v-model="info.y4" clearable class="all" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="step">紧张收缩阶段</el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="平均值：" prop="y5">
            <el-input v-model="info.y5" clearable class="all" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="变异值：" prop="y6">
            <el-input v-model="info.y6" clearable class="all" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="放松时间：" prop="y7">
            <el-input v-model="info.y7" clearable class="all" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="step">耐力收缩阶段</el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="平均值：" prop="y8">
            <el-input v-model="info.y8" clearable class="all" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="变异性：" prop="y9">
            <el-input v-model="info.y9" clearable class="all" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="step">后静息阶段</el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="平均值：" prop="y10">
            <el-input v-model="info.y10" clearable class="all" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="变异性：" prop="y11">
            <el-input v-model="info.y11" clearable class="all" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-button type="primary" style="margin: 30px auto;" @click="next(infoForm)">下一步</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { getToken, setToken, removeToken, getCacheInfo, cacheInfo, removeCacheInfo } from '@/utils/auth'
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import useUserStore from '/src/store/modules/user'
import { useRoute, useRouter } from 'vue-router'
import { emgData } from '@/api/login'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()


interface Info{
  average_emg: string
  median_frequency: string
  variation_coefficient: string
  up_down_time: string
}
const info = reactive<Info>(getCacheInfo())

const infoForm = ref<FormInstance>()

const infoRules = reactive<FormRules<Info>>({
  y1:[{ required:true, trigger: "blur", message: "请输入 前静息阶段 平均值"}],
  y2:[{ required:true, trigger: "blur", message: "请输入 前静息阶段 变异值"}],
  y3:[{ required:true, trigger: "blur", message: "请输入 快速收缩阶段 最大值"}],
  y4:[{ required:true, trigger: "blur", message: "请输入 快速收缩阶段 放松时间"}],
  y5:[{ required:true, trigger: "blur", message: "请输入 紧张收缩阶段 平均值"}],
  y6:[{ required:true, trigger: "blur", message: "请输入 紧张收缩阶段 变异值"}],
  y7:[{ required:true, trigger: "blur", message: "请输入 紧张收缩阶段 放松时间"}],
  y8:[{ required:true, trigger: "blur", message: "请输入 耐力收缩阶段 平均值"}],
  y9:[{ required:true, trigger: "blur", message: "请输入 耐力收缩阶段 变异性"}],
  y10:[{ required:true, trigger: "blur", message: "请输入 后静息阶段 平均值"}],
  y11:[{ required:true, trigger: "blur", message: "请输入 后静息阶段 变异性"}],
})

const next = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // emgData({user_data_id:info.user_id,
      //     average_emg:info.average_emg,
      //     median_frequency:info.median_frequency,
      //     variation_coefficient:info.variation_coefficient,
      //     up_down_time:info.up_down_time}).then( () => {
      debugger
        if(goEmg.value){
          router.push({ path: "/emg" });
        } else {
          router.push({ path: "/result" });
        }
      // })
    } else {
      console.log('error submit!', fields)
    }
  })
}
const goEmg = ref(false)
const created= () => {
  let nsjfs = 0
  info.testRusult.forEach(tr => {
    if (tr.type == '9'){
      goEmg.value = true
    }
  })
  console.log("goEmg:",goEmg)
}
created()

</script>

<style scoped>
.all {
  width: 100%;
}
.step {
  margin-top: 5px;
  font-weight: 500;
  margin-left: 5px;
  color: #3fd9fd;
}
</style>
